<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleMember(0)">
        添加
      </el-button>
    </div>
    <el-table v-loading="listLoading" :data="LiveList" border fit highlight-current-row row-key="id"
      style="width: 100%;">
      <el-table-column label="序号" type="index" align="center" width="60px" />
      <!-- <el-table-column label="序号" prop="sequence" align="center" width="80px" /> -->
      <el-table-column label="商品名称" prop="productName" align="center" />
      <el-table-column label="商品图片" align="center">
        <template slot-scope="{row}">
          <el-image style="width: 100px; height: 100px" v-if="row.productImg" :src="row.productImg"
            :preview-src-list="[row.productImg]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" prop="productPrice" align="center" />

      <el-table-column label="直播平台" align="center">
        <template slot-scope="{row}">
          <span>{{ returnValueToLable(row.type,typeJson) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.productStatus===1?'上架':'下架' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="点赞数量" prop="likeNum" align="center" /> -->
      <el-table-column label="时间" prop="createTime" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleLiveProduct(row)">
            {{ row.productStatus !=1?'直播间上架':'直播间下架' }}
          </el-button>
          <el-button slot="reference" size="mini" type="danger" @click="handleBan(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination v-show="total>0" :total="Livetotal" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
      @pagination="getList" /> -->

    <el-dialog title="添加直播间商品" :visible.sync="dialogDetailVisible" width="1300px">
      <div>
        <div class="filter-container">
          <el-input v-model="listQuery.name$lk" placeholder="商品名称" class="filter-item" />
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
        </div>
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row row-key="id"
          style="width: 100%;" @selection-change="handleSelectionChange">
          <!-- <el-table-column label="序号" type="index" align="center" width="60px" /> -->
          <el-table-column label="序号" prop="sequence" align="center" width="80px" />
          <el-table-column label="商品编号" prop="identifier" align="center" />
          <el-table-column label="商品名称" prop="name" align="center" />
          <el-table-column label="商品分类" prop="categoryName" align="center" />
          <el-table-column label="定价" prop="priceText" align="center" />
          <el-table-column label="销量" prop="saleNum" align="center" />
          <!-- <el-table-column label="商品类型" prop="isSeckill" align="center" /> -->
          <el-table-column label="商品类型" prop="type" align="center">
            <template slot-scope="{row}">
              <el-tag v-if="row.type == 1" type="primary">众茶通App商品</el-tag>
              <el-tag v-else type="success">众茶通小程序商品</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="addProductToLive(row.id)">
                添加到直播间
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
          @pagination="getList" />
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogDetailVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogDetailVisible = false">
          确定
        </el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {liveProduct,saveLiveProduct,operationProduct,deletedLiveProduct} from '@/api/Live'
  import {productPageByQo} from '@/api/product'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import Cascader from '@/components/Cascader'
  import Upload from '@/components/Upload'

  export default {
    name: 'ProductList',
    directives: {
      waves
    },
    components: {
      Cascader,
      Pagination,
      Upload
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        LiveList: [],
        list: [],
        id:'',
        Livetotal: 0,
        total: 0,
        listLoading: true,
        listQuery: {
          pageNo: 1,
          pageSize: 20,
          name$lk: '',
          status: '1',
          isSeckill: '0',
        },
        multipleSelection: [],
        categoryData: [],
        props: {
          value: 'id',
          label: 'name'
        },
        temp: {
          id: 0,
          productName: '',
          productImg: '',
          status: 1,
        },
        statusJson: [
          { value: 0, label: '下架' },
          { value: 1, label: '上架' }
        ],

        typeJson: [
          { value: 1, label: '众茶通APP' },
          { value: 2, label: '众茶通小程序' }
        ],

        rules: {
          status: [{
            required: true,
            message: "请选择",
            trigger: "change"
          }],
        },
        dialogDetailVisible: false,
        detail: {},
      }
    },
    watch: {},
    created() {
      this.get_liveList();
      
    },
    methods: {
      handleBan(row) {
        this.$confirm('是否确定删除商品').then(() => {
          deletedLiveProduct({
            ids: row.id
          }).then((res) => {
            this.get_liveList();

            this.$message({
              message: '删除成功',
              type: 'success'
            });
          })
        })
      },
      get_liveList() {
        this.listLoading = true
        liveProduct({
          id: this.userInfo.id
        }).then(response => {
          this.LiveList = response || []
          this.Livetotal = response.length
          this.listLoading = false
        })
      },
      getList() {
        this.listLoading = true
        productPageByQo(this.listQuery).then(response => {
          this.list = response.list || []
          this.total = response.totalCount
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.pageNum = 1
        this.getList()
      },
      // app添加
      addProductToLive(id) {
        saveLiveProduct({
          productId: id,
        }).then(response => {
          this.get_liveList();
          this.dialogDetailVisible = false
        })
      },
      handleLiveProduct(row){
        operationProduct({
          id:row.id
        }).then(response => {
          this.$message.success('操作成功')
          this.get_liveList();
        })
      },
      toDetail(gongyingId, productId) {
        this.$router.push({
          path: "/front-shop/productDetail",
          query: {
            id: gongyingId,
            productId: productId
          }
        });
      },
      handleMember(row) {
        this.getList();
        this.dialogDetailVisible = true;
      },
      // 查询
      handleFilter() {
        this.listQuery.pageNo = 1
        this.getList()
      },
      // 批量操作
      handleSelectionChange(val) {
        this.multipleSelection = val.map((ele) => {
          return ele.id
        })
      },

    }
  }
</script>
